<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app{
        font-size: 40px;
        width: 10em; /* 400px */
        height: 10em;
        border: solid 1px black;
    }
    p{
        font-size: 0.5em; /* 20px */ 
        width: 10em; /* 200px */
        height: 10em;
        border: solid 1px red;
    }
    span{
        font-size: 0.5em;  
        width: 10em;
        height: 10em;
        border: solid 1px blue;
        display: block;
    }
</style> 
<body>
    <div id="app">
        我是父元素
        <p>我是子元素
            <span>我是孙元素</span>
        </p>

    <script>

// var name  = "1"
// function wrap(){
//     this.name = 2
//     var name = 3
//     var func = ()=>{
//       console.log(this)
//     }
//     func()
// }
// wrap()
// let obj2 = {
//     a:10,
//     b:function(n){
//         let f = (n)=> {
//             console.log(this)
//            return n + this.a
//         }
//         return f(n)
//     }
// }

// console.log(obj2.b(2))

for ( let i=0; i< 10; i++ ){
 setTimeout(()=>{
  console.log(i)
 }, 0)
}



    </script>
</body>
</html>